<template>
  <div class="page-container">
    <div class="page-card-container">
      <a-form class="mb-20" :model="pageSet" layout="inline">
        <a-form-item label="职位名称">
          <a-input v-model:value="pageSet.name" allow-clear></a-input>
        </a-form-item>
        <a-form-item>
          <div class="flex-row-ycenter">
            <div class="commonBtn-primary mr-10" @click="loadPagination(true)">
              搜索
            </div>
            <div class="commonBtn-primary" @click="goHandle(1)">新增</div>
          </div>
        </a-form-item>
      </a-form>
      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
      >
        <template #bodyCell="{text, record, index, column}">
          <div
            class="flex-row-xy-center c-primaryColor fs-12"
            v-if="column.title == '操作'"
          >
            <span class="mr-10 pointer" @click="goHandle(2, record)">编辑</span>
            <span class="pointer" @click="goHandle(3, record, index)"
              >删除</span
            >
          </div>
        </template>
      </a-table>
      <Pagination
        class="mt-10"
        :page-set="pageSet"
        :load-pagination="loadPagination"
      ></Pagination>
      <a-drawer
        width="50%"
        v-model:open="showModal"
        :title="handleTitle"
        @ok="showModalCon"
      >
        <a-form :model="form" :label-col="{span: 8}" ref="formRef">
          <a-row>
            <a-col :span="12">
              <a-form-item
                label="职位名称"
                name="name"
                :rules="[{required: true, message: '请填写职位名称'}]"
              >
                <a-input
                  v-model:value="form.name"
                  placeholder="请填写职位名称"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="唯一编码"
                name="code"
                :rules="[{required: true, message: '请填写唯一编码'}]"
              >
                <a-input
                  v-model:value="form.code"
                  placeholder="请填写唯一编码"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="排序"
                :rules="[{required: false, message: '请填写排序'}]"
              >
                <a-input
                  type="number"
                  v-model:value="form.sort"
                  placeholder="请填写排序"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="备注">
                <a-input
                  v-model:value="form.remark"
                  placeholder="请填写备注"
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <template #footer>
          <div class="flex-row-xy-center">
            <a-button style="margin-right: 20px" @click="showModal = false"
              >取消</a-button
            >
            <a-button type="primary" @click="showModalCon">提交</a-button>
          </div>
        </template>
      </a-drawer>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {
  posAdd,
  posDelete,
  posDetail,
  posPage,
  posEdit
} from "@/api/configCenter/organization/position";
import useAppStore from "@/store/app";
import {Modal} from "ant-design-vue";
import Pagination from "@/components/pagination/Pagination.vue";

//请求参数
const pageSet = ref({
  pageNo: 1,
  pageSize: 20,
  total: 0
});
const tableData = ref([]); //表格数据
const tableLoading = ref(false); //表格加载
const form = ref({}); //表单数据
const formRef = ref(); //表单ref

/**
 * 获取表格数据
 * @param reset 是否重置
 */
const loadPagination = (reset: boolean = false) => {
  tableLoading.value = true;
  if (reset) {
    tableData.value = [];
    pageSet.value.pageNo = 1;
  }
  posPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
      tableLoading.value = false;
    })
    .catch((err) => {
      tableLoading.value = false;
    });
};
loadPagination();

const showModal = ref(false);
const handleTitle = ref<string>();
const handleType = ref<number>();
const goHandle = (type: number, info?: any, index?: number) => {
  handleType.value = type;
  form.value = {};
  if (formRef.value) {
    //重置验证
    formRef.value.clearValidate();
  }
  if (type === 1) {
    handleTitle.value = "新增";
    showModal.value = true;
    return;
  }
  if (type === 2) {
    handleTitle.value = "编辑";
    useAppStore.loading = true;
    posDetail({id: info.id}).then((res) => {
      form.value = res.data;
      showModal.value = true;
      useAppStore.loading = false;
    });
    return;
  }
  if (type === 3) {
    Modal.confirm({
      title: "提示",
      content: "确定要删除吗",
      onOk() {
        useAppStore.loading = true;
        posDelete({id: info.id}).then((res) => {
          tableData.value.splice(index, 1);
          pageSet.value.total--;
          useAppStore.loading = false;
        });
      }
    });
    return;
  }
};

const showModalCon = () => {
  if (handleType.value === 1) {
    formRef.value.validate().then((res) => {
      useAppStore.loading = true;
      posAdd(form.value).then((res) => {
        loadPagination();
        showModal.value = false;
        useAppStore.loading = false;
      });
    });
  }

  if (handleType.value === 2) {
    formRef.value.validate().then((res) => {
      useAppStore.loading = true;
      posEdit(form.value).then((res) => {
        loadPagination();
        showModal.value = false;
        useAppStore.loading = false;
      });
    });
  }
};

const columns = [
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    customRender: function ({index}) {
      return index + 1;
    },
    width: 80
  },
  {
    title: "职位名称",
    dataIndex: "name",
    align: "center"
  },
  {
    title: "唯一编码",
    dataIndex: "code",
    align: "center"
  },
  {
    title: "排序",
    dataIndex: "sort",
    align: "center"
  },
  {
    title: "备注",
    dataIndex: "remark",
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "handle",
    align: "center",
    width: 100,
    fixed: "right"
  }
];
</script>

<style lang="less" scoped></style>
